<template>
	<div class="containerAll me-installmentDetail">
		<div class="header flex">
			<p class="payTitle">需支付金额</p>
			<p class="headerPrice">
				<span class="paySymbol">￥</span>
				<span class="payPrice">890.00</span>
			</p>
		</div>
		<div class="instalmentType">
			<img class="logo" />
			<div class="typeFirst flex">
				<div class="FirstLeft">
					<p class="logoTitle">马上花分期支付</p>
					<p class="ableLimit">可用额度：￥445.00</p>
				</div>
				<p class="typeRight">￥445.00</p>
			</div>
			<div class="typeCommon">
				<span class="radius"></span>
				<span class="periods">￥74.16×12期</span>
				<span class="service">(含服务费)</span>
			</div>
			<div class="typeCommon">
				<span class="radius"></span>
				<span class="periods">￥74.16×12期</span>
				<span class="service">(含服务费)</span>
			</div>
			<div class="typeCommon">
				<span class="radius"></span>
				<span class="periods">￥74.16×12期</span>
				<span class="service">(含服务费)</span>
			</div>
			<div class="typeCommon">
				<span class="radius"></span>
				<span class="periods">￥74.16×12期</span>
				<span class="service">(含服务费)</span>
			</div>
		</div>

		<div class="balance flex">
			<img class="balanceImg" />
			<div class="typeFirst">
				<p class="logoTitle">支付差额</p>
				<p class="ableLimit">微信支付</p>
			</div>
			<p class="typeRight">￥445.00</p>
		</div>
		<p class="warn">温馨提示：众安保险提供消费分期信用保险服务，借款服务由赢众通达提供</p>
		<p class="protocols">
			<img class="protocolsImg" />
			<span>已阅读并接受</span>
			<a href="javascript:volid(0);">《马上花用户服务协议》</a>
			<a href="javascript:volid(0);">《个人征信及信息授权书》</a>
		</p>
		<div class="payNow">立即支付</div>
	</div>
</template>

<script>
</script>

<style lang="less" rel="stylesheet/less">
	.me-installmentDetail {
		.header {
			height: 1.92rem;
			background: #FFFFFF;
			color: #000000;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.payTitle {
				font-size: .28rem;
				height: .28rem;
				line-height: .28rem;
			}
			.headerPrice {
				position: relative;
			}
			.payPrice {
				height: .54rem;
				line-height: .54rem;
				font-size: .54rem;
			}
			.paySymbol {
				font-size: .2rem;
				position: absolute;
				left: -.26rem;
				top: .03rem;
			}
		}
		.typeFirst {
			justify-content: space-between;
			align-items: center;
			padding: .37rem 0;
			border-bottom: 1px solid #F2F2F2;
			height: .66rem;
		}
		.typeRight {
			font-size: .36rem;
			height: .36rem;
			margin-right: .3rem;
		}
		.logoTitle {
			font-size: .3rem;
			height: .3rem;
			line-height: .3rem;
			color: #000000;
		}
		.ableLimit {
			margin-top: .14rem;
			font-size: .22rem;
			height: .22rem;
			line-height: .22rem;
			color: #000000;
		}
		.instalmentType {
			padding: 0 0 0 1.1rem;
			height: 5.37rem;
			position: relative;
			top: .18rem;
			background: #FFFFFF;
			.logo {
				width: .5rem;
				height: .5rem;
				position: absolute;
				left: .3rem;
				top: .45rem;
				background: red;
			}
			.typeCommon {
				padding: .37rem 0;
				height: .24rem;
				line-height: .24rem;
				border-bottom: 1px solid #F2F2F2;
				font-size: .24rem;
			}
		}
		.radius {
			display: inline-block;
			width: .2rem;
			height: .2rem;
			border-radius: .1rem;
			border: 1px solid #F2F2F2;
		}
		.service {
			margin-right: .3rem;
		}
		.periods {
			display: inline-block;
			width: 4.58rem;
		}
		.balance {
			height: 0.8rem;
			padding: .3rem .37rem;
			background: #FFFFFF;
			margin-top: .18rem;
			align-items: center;
			position: relative;
			justify-content: space-between;
			.balanceImg {
				position: absolute;
				left: .3rem;
				width: .5rem;
				height: .46rem;
			}
			.typeFirst {
				margin-left: .9rem;
			}
			.typeRight {
				font-size: .3rem;
				margin-right: 0;
			}
		}
		.warn {
			color: #000000;
			padding: .3rem;
			font-size: .16rem;
			text-align: center;
		}
		.protocols {
			text-align: center;
			font-size: .16rem;
			padding: .3rem;
			margin-top: .3rem;
			a {
				text-decoration: none;
				color: #000000;
			}
			.protocolsImg {
				width: .3rem;
				height: .3rem;
				background: red;
				vertical-align: bottom;
			}
		}
		.payNow {
			width: 100%;
			height: 1rem;
			background: #FBC200;
			color: #000000;
			font-size: .3rem;
			text-align: center;
			line-height: 1rem;
			position: absolute;
			bottom: 0;
		}
	}
</style>